<template>
  <div class="home">
    <Test1 style="margin-bottom: 100px" />
  </div>
</template>

<script>
import { treeData } from './tree';
import Test1 from './Test1';
export default {
  name: 'HomeView',
  data() {
    return {
      query: {
        amount: '',
        contractNo: '',
        date1: '',
        date2: '',
        date3: '',
        date4: '',
        date5: '',
        text1: '哈哈哈',
        text2: '',
        test1: '',
        test2: '',
        test3: '',
        test4: '',
        test5: '',
        province: '',
        city: '',
        area: '',
        customerNo: '你好',
        tree: '',
        amount: '',
      },
      rules: {
        contractNo: [{ required: true, message: '必填字段', trigger: 'blur' }],
        province: [{ required: true, message: '必填字段', trigger: 'change' }],
        tree: [{ required: true, message: '必填字段', trigger: 'change' }],
        // date1: [{ required: true, message: '时间必填', trigger: ['change', 'blur'] }],
      },
      searchColumns: [
        // {
        //   type: 'searchTableSpec',
        //   name: this.$t('matchPurchaseContract.search.supplier'),
        //   prop: 'partner',
        //   searchType: 'supplier',
        //   isMultiple: true,
        //   currentValue: this.isCargoType && invoiceUnitName ? invoiceUnitName : null,
        // },
        {
          prop: 'date1',
          name: '开始时间',
          type: 'startDateRangePicker',
          required: true,
        },
        {
          prop: 'date2',
          name: '结束时间',
          type: 'endDateRangePicker',
        },
        {
          prop: 'date3',
          name: '开始时间',
          type: 'startDateRangePickerTime',
        },
        {
          prop: 'date4',
          name: '结束时间',
          type: 'endDateRangePickerTime',
          icon: 'el-icon-phone',
          iconMethod: 'iconMethod',
        },
        {
          prop: 'date5',
          name: '时间范围',
          type: 'daterange',
        },
        {
          prop: 'text1',
          type: 'text',
          name: '文本',
          icon: 'el-icon-user',
          iconMethod: 'iconMethod',
        },
        {
          prop: 'contractNo',
          name: '输入框',
          type: 'input',
        },
        {
          prop: 'text2',
          name: '文本域',
          type: 'textarea',
          span: 24,
        },
        {
          prop: ['test1', 'test2'],
          name: '金额范围',
          type: 'inputRange',
          unit: '元',
        },
        {
          prop: ['test3', 'test4'],
          name: '金额范围1',
          type: 'selectRange',
          options: [
            {
              value: '0',
              label: '斤',
            },
            {
              value: '1',
              label: '吨',
            },
          ],
          unit: '元',
        },
        {
          prop: 'test5',
          name: '范围选择',
          type: 'select',
          options: [
            {
              value: '0',
              label: '斤',
            },
            {
              value: '1',
              label: '吨',
            },
          ],
        },
        {
          prop: 'province',
          name: '省份',
          type: 'provinceAddress',
          clearRelation: ['city', 'area'],
        },
        {
          prop: 'city',
          name: '市',
          type: 'cityAddress',
          clearRelation: ['area'],
        },
        {
          prop: 'area',
          name: '县',
          type: 'areaAddress',
        },
        {
          prop: 'customerNo',
          type: 'searchTableSpec',
          name: '客户名称',
          searchType: 'supplier',
          extraData: {
            partnerTypes: 'HZHB03,HZHB01',
            companyCode: '1223', //公司
          },
          isMultiple: true,
          checkRowKeys: [2],
          changeMethod: 'changeMethod',
          extraQueryFields: [
            {
              queryField: 'age1',
              originField: 'age',
            },
          ],
          inputField: 'name',
        },
        {
          prop: 'tree',
          type: 'treeSelect',
          name: '树组件',
          options: treeData,
          isMultiple: true,
        },
        {
          prop: 'amount',
          type: 'inputNumber',
          name: '金额',
          append: '元',
        },
        {
          prop: 'amount',
          type: 'inputNumber',
          name: '金额1',
          append: '元',
        },
        {
          prop: 'amount',
          type: 'inputNumber',
          name: '金额1',
          append: '元',
        },
        {
          prop: 'amount',
          type: 'inputNumber',
          name: '金额1',
          append: '元',
        },
        {
          prop: 'amount',
          type: 'inputNumber',
          name: '金额1',
          append: '元',
        },
        {
          prop: 'amount',
          type: 'inputNumber',
          name: '金额1',
          append: '元',
        },
      ],
    };
  },
  methods: {
    changeValue(val) {
      console.log(val, '肤浅');
      this.query.amount = val;
    },
    resetBtnClick() {},
    search() {
      console.log(this.query);
    },
    iconMethod(val, key) {
      console.log(val, key, '点击了');
    },
    changeAddressHandler(params) {
      console.log(params, '切换');
    },
    changeMethod(params) {
      console.log(params, '修改参数');
    },
    async submitHandler() {
      const formData = await this.$refs.siruiSearchRef.getValidateFormData();
      console.log(formData, '提交数据');
    },
  },
  components: {
    Test1,
  },
};
</script>
